import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu';
import {
  SidebarProvider,
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuItem,
  SidebarTrigger,
  SidebarMenuAction,
} from '@/components/ui/sidebar';
import { useDirectoryHandle } from '@/entrypoints/hook/useDirectoryHandle';
import { cn, getAllFDirectoryHandleByDirectoryHandle } from '@/lib/utils';
import {
  MoreHorizontal,
  ArrowBigDown,
  ArrowBigDownDash,
  Trash2,
  Inbox,
  RefreshCcw,
  Search,
  Hammer,
  MonitorUp,
} from 'lucide-react';
import { useVirtualizer } from '@tanstack/react-virtual';
import { getGigaSkuAndProductId } from '@/lib/giga';
import config, { CollectState, ProcessState, PushState } from '@/config';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import Funnel from '@/components/Funnel';
import { Task } from '../hook/useConcurrentRequest';
import { toast } from 'sonner';
import { MutableRefObject, useId } from 'react';
import { getProductState, State } from '@/lib/filesystem';
import { usePush } from './hook/useDiaoxiaomi';
import { useProcess } from './hook/useProcess';
import { TaskInfo, TaskType } from '@/entrypoints/hook/useConcurrentRequest';

enum OrderDirection {
  'asc' = '升序',
  'desc' = '降序',
}

interface OrderOptions {
  skuInfo: string;
}
function order(productCollectInfos: ProductCollectInfo[], orderOptions: OrderOptions) {
  // 获取排序方向，默认为升序
  const isDescending = orderOptions.skuInfo === OrderDirection.desc;

  // 复制数组以避免修改原数组（根据需求决定是否需要）
  const sortedArray = [...productCollectInfos];

  sortedArray.sort((a, b) => {
    // 比较skuInfo字符串
    const comparison = a.skuInfo.localeCompare(b.skuInfo);
    // 根据排序方向调整结果
    return isDescending ? -comparison : comparison;
  });

  return sortedArray;
}

export interface ProductCollectInfo {
  skuInfo: string;
  state: State;
  selected?: boolean;
}
type Props = {
  children?: React.ReactNode;
  className?: string;
  enqueueTask: (task: Task['task']) => Promise<unknown>;
  totalTask: MutableRefObject<Task[]>;
  completedTask: MutableRefObject<Task[]>;
  runTaskItems: (
    collectInfoList: TaskInfo[],
    opeartion: (collectInfo: TaskInfo) => Promise<void>,
    enqueueTask: (task: Task['task']) => Promise<unknown>,
  ) => Promise<unknown[]>;
};
export default function LocalDiskInfo({
  children,
  className,
  enqueueTask,
  totalTask,
  completedTask,
  runTaskItems,
  ...props
}: Props) {
  const { getDirectoryHandle, setCollectDirectoryHandle } = useDirectoryHandle();
  const [productCollectInfos, setProductCollectInfos] = useState<ProductCollectInfo[]>([]);
  const virtualizerParentRef = useRef(null);
  const appCofing = useAppConfig();
  const [isfreshing, setIsfreshing] = useState(false);
  const [searchValue, setSearchValue] = useState('');
  const searchRef = useRef<HTMLInputElement>(null);
  const [isSelectedAll, setIsSelectedAll] = useState(false);
  const [collectStateList, setCollectStateList] = useState<CollectState[]>([
    CollectState.init,
    CollectState.success,
    CollectState.error,
  ]);
  const [processStateList, setProcessStateList] = useState<ProcessState[]>([
    ProcessState.init,
    ProcessState.success,
    ProcessState.error,
  ]);
  const [pushStateList, setPushStateList] = useState<PushState[]>([
    PushState.init,
    PushState.success,
    PushState.error,
  ]);
  const rootDirectoryName = useRef('');

  const { processProduct } = useProcess();
  const { pushProduct, pushProductVideo } = usePush();

  const rowVirtualizer = useVirtualizer({
    count: productCollectInfos.length,
    getScrollElement: () => virtualizerParentRef.current,
    estimateSize: (i) => 32,
    overscan: 5,
  });

  const getSkuInfos = useCallback(
    async function getSkuInfos() {
      const directoryHandle = await getDirectoryHandle();
      rootDirectoryName.current = directoryHandle.name;
      // 获取所有的货号目录
      const skuInfoDirectoryHandles =
        await getAllFDirectoryHandleByDirectoryHandle(directoryHandle);

      let newProductCollectInfos: ProductCollectInfo[] = [];
      await Promise.all(
        skuInfoDirectoryHandles.map(async (skuInfoDirectoryHandle) => {
          const state = await getProductState(
            appCofing.productStateFilename,
            skuInfoDirectoryHandle,
          );

          newProductCollectInfos.push({
            skuInfo: skuInfoDirectoryHandle.name,
            state: state,
          });
        }),
      );

      // 搜索词过滤
      if (searchValue) {
        newProductCollectInfos = newProductCollectInfos.filter((newProductCollectInfo) => {
          return newProductCollectInfo.skuInfo.includes(searchValue);
        });
      }

      newProductCollectInfos = newProductCollectInfos.filter((newProductCollectInfo) => {
        // console.log(newProductCollectInfo);
        return (
          collectStateList.includes(newProductCollectInfo.state.collectState) &&
          processStateList.includes(newProductCollectInfo.state.processState) &&
          pushStateList.includes(newProductCollectInfo.state.pushState)
        );
      });

      // 进行排序
      newProductCollectInfos = order(newProductCollectInfos, {
        skuInfo: OrderDirection.asc,
      });

      setProductCollectInfos((oldProductCollectInfos) => {
        // 主要是获取之前的属性
        newProductCollectInfos.map((newProductCollectInfo) => {
          const oldProductCollectInfo = oldProductCollectInfos.find((oldProductCollectInfo) => {
            return oldProductCollectInfo.skuInfo === newProductCollectInfo.skuInfo;
          });
          if (oldProductCollectInfo) {
            newProductCollectInfo.selected = oldProductCollectInfo.selected;
          }
        });
        return newProductCollectInfos;
      });
    },
    [getDirectoryHandle, searchValue, collectStateList, processStateList, pushStateList],
  );

  useEffect(() => {
    const timmer = setInterval(getSkuInfos, 3000);
    getSkuInfos();
    return () => {
      clearInterval(timmer);
    };
  }, [getSkuInfos]);

  // 单个的加工和重新加工
  async function process(productCollectInfo: ProductCollectInfo, force = false) {
    const [gigaSku, gigaProductId] = getGigaSkuAndProductId(productCollectInfo.skuInfo);
    await processProduct({
      gigaProductId,
      gigaSku,
      skuIdInfo: productCollectInfo.skuInfo,
      force,
      taskType: TaskType.process,
    });
  }

  // 批量加工和重新加工
  async function batchProcess(force = false) {
    const selectedProductCollectInfos = productCollectInfos.filter((productCollectInfo) => {
      return productCollectInfo.selected;
    });
    const collectInfoList = selectedProductCollectInfos.map((productCollectInfo) => {
      const [gigaSku, gigaProductId] = getGigaSkuAndProductId(productCollectInfo.skuInfo);
      return {
        skuIdInfo: productCollectInfo.skuInfo,
        gigaProductId: gigaProductId,
        gigaSku: gigaSku,
        force: force,
        taskType: TaskType.process,
      };
    });
    await runTaskItems(collectInfoList, processProduct, enqueueTask);
    if (totalTask.current.length === completedTask.current.length) {
      toast.success(`完成所有的批量任务`);
    }
  }

  // 单个的上传和重新上传
  async function push(productCollectInfo: ProductCollectInfo, force = false) {
    const [gigaSku, gigaProductId] = getGigaSkuAndProductId(productCollectInfo.skuInfo);
    await pushProduct({
      gigaProductId,
      gigaSku,
      skuIdInfo: productCollectInfo.skuInfo,
      force,
      taskType: TaskType.push,
    });
  }

  // 批量上传和重新上传
  async function batchPush(force = false) {
    const selectedProductCollectInfos = productCollectInfos.filter((productCollectInfo) => {
      return productCollectInfo.selected;
    });
    const collectInfoList = selectedProductCollectInfos.map((productCollectInfo) => {
      const [gigaSku, gigaProductId] = getGigaSkuAndProductId(productCollectInfo.skuInfo);
      return {
        skuIdInfo: productCollectInfo.skuInfo,
        gigaProductId: gigaProductId,
        gigaSku: gigaSku,
        force: force,
        taskType: TaskType.push,
      };
    });
    await runTaskItems(collectInfoList, pushProduct, enqueueTask);
    if (totalTask.current.length === completedTask.current.length) {
      toast.success(`完成所有的批量任务`);
    }
  }

  // 单个的重新上传视频
  async function pushVideo(productCollectInfo: ProductCollectInfo, force = false) {
    const [gigaSku, gigaProductId] = getGigaSkuAndProductId(productCollectInfo.skuInfo);
    await pushProductVideo({
      gigaProductId,
      gigaSku,
      skuIdInfo: productCollectInfo.skuInfo,
      force,
      taskType: TaskType['push-video'],
    });
  }

  // 批量重新上传视频
  async function batchPushVideo(force = false) {
    const selectedProductCollectInfos = productCollectInfos.filter((productCollectInfo) => {
      return productCollectInfo.selected;
    });
    const collectInfoList = selectedProductCollectInfos.map((productCollectInfo) => {
      const [gigaSku, gigaProductId] = getGigaSkuAndProductId(productCollectInfo.skuInfo);
      return {
        skuIdInfo: productCollectInfo.skuInfo,
        gigaProductId: gigaProductId,
        gigaSku: gigaSku,
        force: force,
        taskType: TaskType['push-video'],
      };
    });
    await runTaskItems(collectInfoList, pushProductVideo, enqueueTask);
    if (totalTask.current.length === completedTask.current.length) {
      toast.success(`完成所有的批量任务`);
    }
  }

  // 删除货号目录
  async function deleteSkuInfo(productCollectInfo: ProductCollectInfo) {
    const directoryHandle = await getDirectoryHandle();
    const skuInfoDirectoryHandles = await directoryHandle.getDirectoryHandle(
      productCollectInfo.skuInfo,
    );
    await skuInfoDirectoryHandles.remove({
      recursive: true,
    });
  }

  // 批量删除货号目录
  async function batchDeleteSkuInfo() {
    const selectedProductCollectInfos = productCollectInfos.filter((productCollectInfo) => {
      return productCollectInfo.selected;
    });
    await Promise.all(
      selectedProductCollectInfos.map(async (productCollectInfo) => {
        await deleteSkuInfo(productCollectInfo);
      }),
    );
  }

  // 搜索货号
  async function searchSkuInfo(event: React.MouseEvent) {
    const value = searchRef.current?.value || '';
    setSearchValue(value);
  }

  return (
    <SidebarProvider
      className="w-auto relative md:[&_.hidden]:!block md:[&_.hidden]:!visible [&_[data-sidebar=sidebar]]:!h-full"
      style={{
        // @ts-ignore
        '--sidebar-width': '27em',
      }}
    >
      <SidebarTrigger
        title="折叠/展开"
        className="absolute transition-[left] left-0 z-50 top-2 !cursor-pointer group-has-[[data-collapsible=offcanvas]]/sidebar-wrapper:left-[-1.6em]"
      ></SidebarTrigger>
      <div className="bd-gray rounded-lg mr-2 overflow-hidden flex">
        <div className={cn(className, 'relative')} {...props}>
          <Sidebar variant="sidebar" className="absolute w-full">
            <SidebarHeader className=" ">
              <div className="!ml-5 flex items-center flex-row">
                <div className="text-lg !mr-3">
                  {rootDirectoryName.current ? rootDirectoryName.current : '目录文件'}
                </div>
                <Button
                  size={'sm'}
                  onClick={setCollectDirectoryHandle}
                  className="hover:bg-[#337AB7] bg-[#428BCA]"
                >
                  设置目录
                </Button>
                <div className="ml-auto">
                  <RefreshCcw
                    size={14}
                    className="cursor-pointer transition-transform"
                    style={{
                      transform: isfreshing ? 'rotate(90deg)' : 'rotate(0deg)',
                    }}
                    onClick={async () => {
                      if (isfreshing) {
                        return;
                      }
                      setIsfreshing(true);
                      await getSkuInfos().finally(() => {
                        setIsfreshing(false);
                      });
                    }}
                  ></RefreshCcw>
                </div>
              </div>
              <div className="flex items-center">
                <div className="relative max-w-md">
                  <Input
                    ref={searchRef}
                    defaultValue={searchValue}
                    placeholder="货号搜索..."
                    className="w-full rounded-sm bg-background border border-input pr-8"
                  />
                  <Search
                    onClick={searchSkuInfo}
                    className="absolute cursor-pointer right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"
                  />
                </div>
                <div className="ml-auto">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Funnel size={16} className="cursor-pointer"></Funnel>
                    </DropdownMenuTrigger>
                    <StateFilter
                      setCollectStateList={setCollectStateList}
                      collectStateList={collectStateList}
                      setProcessStateList={setProcessStateList}
                      processStateList={processStateList}
                      setPushStateList={setPushStateList}
                      pushStateList={pushStateList}
                    ></StateFilter>
                  </DropdownMenu>
                </div>
              </div>
              <div className="flex items-center">
                <div className="flex gap-2 bd-bottom-gray items-center">
                  <Checkbox
                    checked={isSelectedAll}
                    onCheckedChange={(state) => {
                      setIsSelectedAll(state ? true : false);
                      setProductCollectInfos((oldProductCollectInfos) => {
                        return oldProductCollectInfos.map((oldProductCollectInfo) => {
                          return {
                            ...oldProductCollectInfo,
                            selected: state ? true : false,
                          };
                        });
                      });
                    }}
                    id="localDiskinfo-select-info"
                    className="rounded-[2px] mr-2 border-[#478ffc] data-[state=checked]:bg-[#478ffc] data-[state=checked]:text-primary-foreground"
                  />
                  <Label className="whitespace-nowrap mb-0" htmlFor="localDiskinfo-select-info">
                    全选
                  </Label>
                </div>
                <div className="ml-auto">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <MoreHorizontal size={16} className="cursor-pointer"></MoreHorizontal>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent
                      side="right"
                      align="start"
                      style={{
                        zIndex: config.dropdownMenuZIndex,
                      }}
                    >
                      <DropdownMenuItem
                        className="cursor-pointer"
                        onClick={() => {
                          batchProcess();
                        }}
                      >
                        <Hammer></Hammer>
                        <span>批量加工</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        className="cursor-pointer"
                        onClick={() => {
                          batchProcess(true);
                        }}
                      >
                        <Hammer></Hammer>
                        <span>批量重新加工</span>
                      </DropdownMenuItem>
                      <DropdownMenuSeparator></DropdownMenuSeparator>
                      <DropdownMenuItem
                        className="cursor-pointer"
                        onClick={() => {
                          batchPush();
                        }}
                      >
                        <MonitorUp></MonitorUp>
                        <span>批量上传</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        className="cursor-pointer"
                        onClick={() => {
                          batchPush(true);
                        }}
                      >
                        <MonitorUp></MonitorUp>
                        <span>批量重新上传</span>
                      </DropdownMenuItem>
                      <DropdownMenuSeparator></DropdownMenuSeparator>
                      <DropdownMenuItem
                        className="cursor-pointer"
                        onClick={() => {
                          batchPushVideo(true);
                        }}
                      >
                        <MonitorUp></MonitorUp>
                        <span>批量重新上传视频</span>
                      </DropdownMenuItem>
                      <DropdownMenuSeparator></DropdownMenuSeparator>
                      <DropdownMenuItem
                        className="cursor-pointer text-destructive hover:!text-destructive/90"
                        onClick={() => {
                          batchDeleteSkuInfo();
                        }}
                      >
                        <Trash2></Trash2>
                        <span>批量删除</span>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              </div>
            </SidebarHeader>
            <SidebarContent className="px-4" ref={virtualizerParentRef}>
              <SidebarMenu
                className="gap-0"
                style={{
                  height: `${rowVirtualizer.getTotalSize()}px`,
                  position: 'relative',
                }}
              >
                {rowVirtualizer.getVirtualItems().map((virtualRow, index) => {
                  const productCollectInfo = productCollectInfos[virtualRow.index];
                  return (
                    <SidebarMenuItem
                      className="flex items-center"
                      key={productCollectInfo.skuInfo}
                      style={{
                        height: `${virtualRow.size}px`,
                        transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
                      }}
                    >
                      <Checkbox
                        checked={productCollectInfo.selected || false}
                        onCheckedChange={(state) => {
                          setProductCollectInfos((oldProductCollectInfos) => {
                            return oldProductCollectInfos.map((oldProductCollectInfo) => {
                              if (oldProductCollectInfo.skuInfo === productCollectInfo.skuInfo) {
                                return {
                                  ...oldProductCollectInfo,
                                  selected: state ? true : false,
                                };
                              }
                              return oldProductCollectInfo;
                            });
                          });
                        }}
                        className="rounded-[2px] mr-2 border-[#478ffc] data-[state=checked]:bg-[#478ffc] data-[state=checked]:text-primary-foreground"
                      />
                      <State state={productCollectInfo.state}></State>
                      <div className="whitespace-nowrap flex items-center">
                        <div className="text-sm select-text">{productCollectInfo.skuInfo}</div>
                      </div>
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <SidebarMenuAction>
                            <MoreHorizontal />
                          </SidebarMenuAction>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent
                          side="right"
                          align="start"
                          style={{
                            zIndex: config.dropdownMenuZIndex,
                          }}
                        >
                          <DropdownMenuItem
                            className="cursor-pointer"
                            onClick={() => {
                              process(productCollectInfo);
                            }}
                          >
                            <Hammer></Hammer>
                            <span>加工</span>
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            className="cursor-pointer"
                            onClick={() => {
                              process(productCollectInfo, true);
                            }}
                          >
                            <Hammer></Hammer>
                            <span>重新加工</span>
                          </DropdownMenuItem>
                          <DropdownMenuSeparator></DropdownMenuSeparator>
                          <DropdownMenuItem
                            className="cursor-pointer"
                            onClick={() => {
                              push(productCollectInfo);
                            }}
                          >
                            <MonitorUp></MonitorUp>
                            <span>上传</span>
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            className="cursor-pointer"
                            onClick={() => {
                              push(productCollectInfo, true);
                            }}
                          >
                            <MonitorUp></MonitorUp>
                            <span>重新上传</span>
                          </DropdownMenuItem>
                          <DropdownMenuSeparator></DropdownMenuSeparator>
                          <DropdownMenuItem
                            className="cursor-pointer"
                            onClick={() => {
                              pushVideo(productCollectInfo, true);
                            }}
                          >
                            <MonitorUp></MonitorUp>
                            <span>重新上传视频</span>
                          </DropdownMenuItem>
                          <DropdownMenuSeparator></DropdownMenuSeparator>
                          <DropdownMenuItem
                            className="cursor-pointer text-destructive hover:!text-destructive/90"
                            onClick={() => {
                              deleteSkuInfo(productCollectInfo);
                            }}
                          >
                            <Trash2></Trash2>
                            <span>删除</span>
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </SidebarMenuItem>
                  );
                })}
              </SidebarMenu>
            </SidebarContent>
          </Sidebar>
        </div>
      </div>
    </SidebarProvider>
  );
}

function State({ state }: { state: State }) {
  return (
    <>
      <div
        title={
          state.collectState === CollectState.error
            ? state.collectState + `: ${state.collectErrorMessage || ''}`
            : state.collectState
        }
      >
        <Inbox
          size={16}
          className={`mr-2 shrink-0 ${state.collectState === CollectState.error ? 'text-destructive' : state.collectState === CollectState.success ? '!text-primary' : ''}`}
        ></Inbox>
      </div>
      <div
        title={
          state.processState === ProcessState.error
            ? state.processState + `: ${state.processErrorMessage || ''}`
            : state.processState
        }
      >
        <Hammer
          size={16}
          className={`mr-2 shrink-0 ${state.processState === ProcessState.error ? 'text-destructive' : state.processState === ProcessState.success ? '!text-primary' : ''}`}
        ></Hammer>
      </div>
      <div
        title={
          state.pushState === PushState.error
            ? state.pushState + `: ${state.pushErrorMessage || ''}`
            : state.pushState
        }
      >
        <MonitorUp
          size={16}
          className={`mr-2 shrink-0 ${state.pushState === PushState.error ? 'text-destructive' : state.pushState === PushState.success ? '!text-primary' : ''}`}
        ></MonitorUp>
      </div>
    </>
  );
}

function StateFilter({
  setCollectStateList,
  collectStateList,
  setProcessStateList,
  processStateList,
  setPushStateList,
  pushStateList,
}: {
  setCollectStateList: React.Dispatch<React.SetStateAction<CollectState[]>>;
  collectStateList: CollectState[];
  setProcessStateList: React.Dispatch<React.SetStateAction<ProcessState[]>>;
  processStateList: ProcessState[];
  setPushStateList: React.Dispatch<React.SetStateAction<PushState[]>>;
  pushStateList: PushState[];
}) {
  const id = useId();
  return (
    <DropdownMenuContent
      side="right"
      align="start"
      style={{
        zIndex: config.dropdownMenuZIndex,
      }}
    >
      {Object.values(CollectState).map((collectState) => {
        return (
          <DropdownMenuItem key={collectState} className="cursor-pointer">
            <div
              className="flex items-center"
              onClick={(event) => {
                event.stopPropagation();
              }}
            >
              <Checkbox
                checked={collectStateList.includes(collectState)}
                onCheckedChange={(state) => {
                  setCollectStateList((oldCollectStateList) => {
                    if (state) {
                      return [...oldCollectStateList, collectState];
                    } else {
                      return oldCollectStateList.filter(
                        (oldCollectState) => oldCollectState !== collectState,
                      );
                    }
                  });
                }}
                id={id + '-collect-state'}
                className="rounded-[2px] mr-3"
              />
              <Label className="whitespace-nowrap mb-0" htmlFor={id + '-collect-state'}>
                {collectState}
              </Label>
            </div>
          </DropdownMenuItem>
        );
      })}
      <DropdownMenuSeparator></DropdownMenuSeparator>
      {Object.values(ProcessState).map((processState) => {
        return (
          <DropdownMenuItem key={processState} className="cursor-pointer">
            <div
              className="flex items-center"
              onClick={(event) => {
                event.stopPropagation();
              }}
            >
              <Checkbox
                checked={processStateList.includes(processState)}
                onCheckedChange={(state) => {
                  setProcessStateList((oldProcessStateList) => {
                    if (state) {
                      return [...oldProcessStateList, processState];
                    } else {
                      return oldProcessStateList.filter(
                        (oldProcessState) => oldProcessState !== processState,
                      );
                    }
                  });
                }}
                id={id + '-process-state'}
                className="rounded-[2px] mr-3"
              />
              <Label className="whitespace-nowrap mb-0" htmlFor={id + '-process-state'}>
                {processState}
              </Label>
            </div>
          </DropdownMenuItem>
        );
      })}
      <DropdownMenuSeparator></DropdownMenuSeparator>
      {Object.values(PushState).map((pushState) => {
        return (
          <DropdownMenuItem key={pushState} className="cursor-pointer">
            <div
              className="flex items-center"
              onClick={(event) => {
                event.stopPropagation();
              }}
            >
              <Checkbox
                checked={pushStateList.includes(pushState)}
                onCheckedChange={(state) => {
                  setPushStateList((oldPushStateList) => {
                    if (state) {
                      return [...oldPushStateList, pushState];
                    } else {
                      return oldPushStateList.filter((oldPushState) => oldPushState !== pushState);
                    }
                  });
                }}
                id={id + '-push-state'}
                className="rounded-[2px] mr-3"
              />
              <Label className="whitespace-nowrap mb-0" htmlFor={id + '-push-state'}>
                {pushState}
              </Label>
            </div>
          </DropdownMenuItem>
        );
      })}
    </DropdownMenuContent>
  );
}
